<!-- 底部切换栏 -->
<template>
	<view>
		<u-tabbar :value="tabbarIndex" @change="tabbarChange" :fixed="true" :placeholder="false"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="菜单" icon="coupon"></u-tabbar-item>
			<u-tabbar-item text="订单" icon="order"></u-tabbar-item>
			<u-tabbar-item text="购物车" icon="shopping-cart"></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		props: {
			name: String
		},
		data() {
			return {
				// 底部bar
				tabbarIndex: 0,
			}
		},
		methods: {
			// 切换底部选项
			tabbarChange(event) {
				this.tabbarIndex = event;
				this.$emit('changeTab', event)
			},
		}
	}
</script>

<style>

</style>
